import React, { useState } from 'react'
import { Layout, Menu, Breadcrumb, Icon,Button } from 'antd';
import '../static/css/AdminIndex.css'
import {Route,Link} from 'react-router-dom'
import AddArticle from './AddArticel'
import ArticleList from './ArticleList'




const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;


function AdminIndex(props) {
    const [collapsed,setCollapsed] = useState(false)

    const onCollapse = collapsed =>  {
      setCollapsed(collapsed)
      };

      const alertMessage =()=>{
        alert('尚未开发敬请期待。。。。')
    }
      
     
    


    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">

            <Menu.Item key="1"> <Icon type="pie-chart" /><span>工作台</span> </Menu.Item>
            <Menu.Item key="2"> <Icon type="desktop" />  <span>添加文章</span></Menu.Item>

            <SubMenu key="sub1" 
              title={ <span>  <Icon type="desktop" />
                  <span>文章管理</span>
                </span> }>

                <Menu.Item key="addArticle">
                  <Link to='/index/add'>
                  添加文章
                  </Link>
                </Menu.Item>

                <Menu.Item key="articleList">
                 <Link to ='/index/list'>
                   文章列表
                 </Link>
                 
                </Menu.Item>
           
                </SubMenu>
         
            <Menu.Item key="9" >
              <Icon type="file" />
              <span>留言管理</span>
              {/* <Button type='danger' onClick={alertMessage}>留言管理 </Button> */}
            </Menu.Item>  

          </Menu>
        </Sider>

        <Layout>
          
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Aronの博客后台管理系统</Breadcrumb.Item>
              <Breadcrumb.Item>工作区</Breadcrumb.Item>
            </Breadcrumb>

            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              
               <div>
                  
                  <Route path="/index/" exact component={AddArticle}/>
                  <Route path="/index/list" exact component={ArticleList}/>
                  <Route path="/index/add" exact  component={AddArticle}/>
                  <Route path="/index/add/:id"  component={AddArticle}/>
                  
              </div>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}> Design By Liuqiang </Footer>

        </Layout>
      </Layout>
    );
}


export default AdminIndex